<template>
  <div id="valuemain" style="height:100%">
    <!-- <div id="linecontainer" style="height: 500px; width: 500px; float: left; margin: 20px; margin-top: 50px; margin-left: 100px"></div>
    <div id="squarecontainer" style="height: 550px; width: 550px; float: left; margin: 20px; margin-top: 50px; margin-left: 100px"></div> -->
    <h2>欢迎来到新零售平台</h2>
  </div>
</template>

<script>
import echarts from '../value/echarts.min.js'
import axios from 'axios'
import request from '@/utils/request'
export default {
  name: 'valueMain',
  data() {
    return {
      storeId: '',
      storeName: '',
      storeLocation: '',
      lineChart: null,
      squareChart: null,
      lineapp: {},
      squareapp: {},
      lineoption: {
        title: {
          text: '价值对比图'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['新零售模式价值', '旧模式价值']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: []
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '新零售模式价值',
            type: 'line',
            // stack: '总量',
            data: []
          },
          {
            name: '旧模式价值',
            type: 'line',
            // stack: '总量',
            data: []
          },
        ]
      },
      squareoption: {
        title: {
            text: '价值优化',
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#283b56'
                }
            }
        },
        legend: {
        //   data:['每单价值优化']
        },
        toolbox: {
          show: true,
          feature: {
            dataView: {readOnly: false},
            restore: {},
            saveAsImage: {}
          }
        },
        dataZoom: {
          show: false,
          start: 0,
          end: 100
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: true,
            data: [],
            name: '单数'
          }
        ],
        yAxis: [
          {
            type: 'value',
            scale: true,
            name: '每单价值优化 ',
            max: 100,
            min: 0,
            boundaryGap: [0.2, 0.2]
          }
        ],
        series: [
          {
            name: '每单价值优化',
            type: 'bar',
            xAxisIndex: 0,
            yAxisIndex: 0,
            data: []
          }
        ]
      }
    }
  },
  mounted() {
    this.vueinit()
  },
  methods: {
    setLineChartData() {
      //  lineChart  折线图
      var linedom = document.getElementById("linecontainer");
      this.lineChart = echarts.init(linedom);

      //  get data
      var news = [50, 100, 120, 160, 240.5, 290, 370.6]
      var old = [10, 40, 80, 110, 162.5, 200, 239.5]
      var date = ['2020年7月1日', '2020年7月2日', '2020年7月3日', '2020年7月4日', '2020年7月5日', '2020年7月6日', '2020年7月7日']

      //  set data
      this.lineoption.xAxis.data = date
      this.lineoption.series[0].data = news
      this.lineoption.series[1].data = old

      if (this.lineoption && typeof this.lineoption === "object") {
        this.lineChart.setOption(this.lineoption, true);
      }
    },
    setSquareChartData() {
      //  squareChart  柱状图
      var squaredom = document.getElementById("squarecontainer");
      this.squareChart = echarts.init(squaredom);

      //  get data
      var x_data = [1,2,3,4,5,6]
      var y_value = [10,30,50,40,32,35]

      //  set data
      this.squareoption.xAxis[0].data = x_data
      this.squareoption.series[0].data = y_value

      if (this.squareoption && typeof this.squareoption === "object") {
        this.squareChart.setOption(this.squareoption, true);
      }
    },
    vueinit() {
      let loginName = JSON.parse(sessionStorage.getItem('login_name'))
      let password = JSON.parse(sessionStorage.getItem('password'))
      let client_id = JSON.parse(sessionStorage.getItem('client_id'))
      let client_secret = JSON.parse(sessionStorage.getItem('client_secret'))

      // this.setLineChartData()
      // this.setSquareChartData()

    }
  }
}
</script>

<style scoped>

</style>
